<template>
    <div>
        <head-top></head-top>
        <div class="search-div">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item label="关键字">
                    <el-input v-model="form.keyword" placeholder="账号,名称,手机"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList()">查询</el-button>
                    <el-button type="primary" @click="dialogVisible = true;dialogTitle='添加';">添加用户</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="table-div">
            <el-table
                    :data="tableData"
                    @selection-change="handleSelectionChange"
                    stripe
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="avatar"
                        label="头像"
                >
                    <template slot-scope="scope">
                        <img :src="scope.row.avatar">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="账号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称">
                </el-table-column>
                <el-table-column
                        prop="moblie"
                        label="手机">
                </el-table-column>
                <el-table-column
                        prop="moblie"
                        label="状态">
                    <template slot-scope="scope">
                        <span>{{scope.row.status == 1 ? '激活' : '禁用'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="create_time"
                        label="创建日期">
                </el-table-column>
                <el-table-column
                        prop="operation"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="edit(scope.row.id);dialogVisible = true;dialogTitle='编辑'">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="paging-div">
                <el-button style="float:left;" size="small" type="danger" @click="del(delId)">删除</el-button>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="this.current_page"
                        :page-sizes="[2,10,15,20]"
                        :page-size="per_page"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="this.total">
                </el-pagination>
            </div>
        </div>

        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="30%"
                center>

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="username">
                    <el-input :readonly="dialogTitle=='编辑'" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="moblie">
                    <el-input v-model="ruleForm.moblie"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio label="1">激活</el-radio>
                        <el-radio label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm');">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import headTop from '../../common/headTop'
    export default {
        name: "adminUser",
        data(){
            return {
                dialogVisible: false,
                dialogTitle:'',
                form: {
                    keyword: ''
                },
                tableData: [],
                total: 0,
                current_page: 1,
                per_page: 10,
                delId:'',
                ruleForm: {
                    username: '',
                    name: '',
                    email: '',
                    moblie: '',
                    status: '',
                },
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    status: [
                        { required: true, message: '请选择状态', trigger: 'blur' },
                    ]
                }
            }
        },
        watch: {
            dialogVisible: {
                deep: true,
                handler: function(val, old) {
                    if (!val) {
                        this.$refs['ruleForm'].resetFields(); //重置表单
                        this.$refs['ruleForm'].clearValidate(); //重置验证
                    }
                }
            }
        },
        created(){
            this.getList();
        },
        methods: {
            //批量删除
            handleSelectionChange(val){
                let delArr = [];
                val.forEach(function(value, index, val) {
                    delArr.push(value.id);
                });
                this.delId = delArr.join(',') ;
            },
            del(id){
                if(!id){
                    this.$message({
                        type: 'error',
                        message: "请选择将要删除的用户",
                    });
                    return;
                }
                this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.post('admin/deleteAdminUser', {id:id}).then((res) => {
                        if(res.code == 1){
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.getList();
                        }else{
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    })
                }).catch(() => {

                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.dialogTitle == '添加'){
                            let data = this.ruleForm;
                            this.$api.post('admin/addAdminUser', data).then((res) => {
                                if(res.code == 1){
                                    this.$message({
                                        type: 'success',
                                        message: '添加成功'
                                    });
                                    this.getList();
                                    this.dialogVisible = false;
                                }else{
                                    this.$message({
                                        type: 'error',
                                        message: res.msg
                                    });
                                }
                            })

                        }else{
                            let data = this.ruleForm;
                            this.$api.post('admin/updateAdminUser', data).then((res) => {
                                if(res.code == 1){
                                    this.$message({
                                        type: 'success',
                                        message: '更新成功'
                                    });
                                    this.getList();
                                    this.dialogVisible = false;
                                }else{
                                    this.$message({
                                        type: 'error',
                                        message: res.msg
                                    });
                                }
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            edit(id){
                this.ruleForm = {};
                this.$api.post('admin/getAdminUserInfo', {id:id}).then((res) => {
                    this.ruleForm = {
                        id: res.data.id,
                        username: res.data.username,
                        name: res.data.name,
                        email: res.data.email,
                        moblie: res.data.moblie,
                        status: res.data.status,
                    }
                })
            },


            getList(){
                let data = {
                    current_page:this.current_page,
                    per_page:this.per_page,
                    keyword:this.form.keyword,
                }
                this.$api.get('admin/getUserList', data).then((res) => {
                    console.log(res);
                    this.tableData = res.data.data;
                    this.current_page = res.data.current_page;
                    this.total = res.data.total;
                })
            },
            handleSizeChange(val) {
                this.per_page = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.current_page = val;
                this.getList();
            },
        },
        components: {
            headTop,
        },
    }
</script>

<style scoped>
    img{
        height:40px;width: 40px;border-radius: 360px;padding-top:5px;
    }
</style>